<script>
export default {
    name:'music',
    data(){
        return{
            artists:[
                {
                    name:'Wudu',
                    id:12488150,
                    img:'https://p2.music.126.net/PxKfKuudGtBNHXWrZjZHpg==/109951163315702938.jpg'
                },
                {
                    name:'柴田淳',
                    id:16215,
                    img:'https://p2.music.126.net/2d36a0OZwPpGAvUMQSLXcQ==/109951163023207570.jpg'
                },
                {
                    name:'徳永英明',
                    id:13961,
                    img:'https://p2.music.126.net/WMsymIGGegQ-CBvKq825Gg==/109951164190234179.jpg'
                },
                {
                    name:'Datsik',
                    id:32460,
                    img:'https://p1.music.126.net/Pz1txkQCmioVGNd8PghlaQ==/109951163940878843.jpg'
                },
                {
                    name:'Virtual Riot',
                    id:813244,
                    img:'https://p2.music.126.net/kXCizbmu0sq1qWjmCLmzpw==/109951163921156280.jpg'
                },
                {
                    name:'Zomboy',
                    id:105770,
                    img:'https://p1.music.126.net/C71KTUdC82XttUfh75AXRA==/109951163832311564.jpg'
                },
                {
                    name:'Rezz',
                    id:1019466,
                    img:'https://p2.music.126.net/cOoS6j1EUwxxPgLGfuzKfg==/109951163039805443.jpg'
                },
                {
                    name:'TroyBoi',
                    id:1022037,
                    img:'https://p1.music.126.net/PJ_CILPytGJ1fsnvrlXxLQ==/3384296792904115.jpg'
                },
                {
                    name:'Marshmello',
                    id:1060019,
                    img:'https://p1.music.126.net/C8S6yDKjFpOXM_WwIVmITQ==/3244658817058795.jpg'
                }
            ]
        }
    },
    methods:{
        goto(ids){
            this.$router.push({
                name:'artist',
                params:{
                    id:ids
                }
            })
        }
    }
}
</script>
<template>
    <div class="music clearfix">
        <template v-for="(item,idx) in artists">
            <div class="artist fl"
            :key="idx"
            :style="{marginLeft:idx%2!==0?'50px':'0'}"
            @click="goto(item.id)"
            >
                <img 
                class="artavatar"
                :src="item.img" alt="">
                <p class="artname">{{item.name}}</p>
            </div>
        </template>
    </div>
</template>

<style lang="stylus" scoped>
.music
    padding: 45px 25px 15px;
    border-bottom: 1px solid #e6e6e6;
    .artist
        margin-bottom 20px
        // box-shadow: 0 1px 2px rgba(0,0,0,0.25);
        cursor pointer
        user-select none
        &:hover 
            transition .3s
            box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    .artavatar
        width 200px 
        height 200px
        margin-bottom 0
    .artname
        font-size 12px
        padding 0 10px
        margin-bottom 0
</style>
